@extends('layouts.header')
@section('style')
        tbody tr:hover {
            cursor: pointer;
            /* background-color: #dee; */
        }
@endsection
@section('content')
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 检测业务 <span class="c-gray en">&gt;</span> 新建批次
    <a class="btn btn-primary radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.reload();"
       title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a>
</nav>
<div class="page-container">
    <div class="panel panel-primary">
        <div class="panel-header">请为要新建的批次选择一个客户</div>
        <div class="panel-body">
            {{-- <div class="cl pd-5 bg-1 bk-gray">
                <span class="l">
                    <a class="btn btn-primary radius" href="javascript:;" onclick="add('添加客户','/admin/client/add','800','400')"><i class="Hui-iconfont">&#xe600;</i> 添加客户</a>
                </span>
            </div> --}}
            <div class="">
                <table class="table table-border table-bordered table-bg table-hover table-condensed table-responsive" id="datatable">
                    <thead>
                    {{--
                    <tr>
                        <th scope="col" colspan="5">客户管理</th>
                    </tr> --}}
                    <tr class="text-c">
                        <th>请选择</th>
                        <th>送检单位</th>
                        <th>委托单位</th>
                        <th>联系人</th>
                        <th>电话</th>
                        <th>地址</th>
                        <th>添加时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                </table>
                <div style="clear:both"></div>
            </div>
        </div>
    </div>
    <div class="panel panel-primary mt-5">
        <div class="panel-header">批次信息</div>
        <div class="panel-body">
            <form class="form form-horizontal" id="form" autocomplete="off">
                {{ csrf_form_field() }}
                <div class="row cl">
                    <label class="form-label col-sm-2">检测性质：</label>
                    <div class="formControls col-sm-4">
                            <span class="select-box">
                                <select class="select" name="test_kind" size="1">
                                    @foreach ($data_test_kind as $val)
                                        <option value="{{$val->name}}">{{$val->name}}</option>
                                    @endforeach
                                </select>
                            </span>
                    </div>
                    <div class="col-sm-6">
                        <a title="管理检测性质" href="javascript:;" onclick="test_kind()" style="text-decoration:none;font-size:20px">
                            <i class="Hui-iconfont Hui-iconfont-manage"></i>
                        </a>
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-sm-2">不合格样品处理：</label>
                    <div class="formControls col-sm-4">
                            <span class="select-box">
                                <select class="select" name="sample_chuli" size="1">
                                    <option selected value="退回">退回</option>
                                    <option value="检方自行处理">检方自行处理</option>
                                </select>
                            </span>
                    </div>
                    <label class="form-label col-sm-2">取报告方式：</label>
                    <div class="formControls col-sm-4">
                            <span class="select-box">
                                <select class="select" name="get_report" size="1">
                                    <option selected value="自取">自取</option>
                                    <option value="快递">快递</option>
                                    <option value="邮件发送">邮件发送</option>
                                </select>
                            </span>
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-sm-2">完成期限：</label>
                    <div class="formControls col-sm-4">
                        <input type="text" id="deadline" name="deadline" value="" onfocus="WdatePicker({minDate:'%y-%M-%d'})" class="input-text Wdate">
                    </div>
                    <label class="form-label col-sm-2">费用（￥ 元）：</label>
                    <div class="formControls col-sm-4">
                        <input type="text" class="input-text" value="0" placeholder="单位为 元" name="money" id="money">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-sm-2">委托单来源：
                        <a class="btn btn-primary radius size-MINI" onclick="layer_show('委托单分类设置','/{{config('constant.name_admin')}}/setting/settingSys/letterFrom')">编辑</a>
                    </label>
                    <div class="formControls col-sm-4">
                        <span class="select-box">
                            <select class="select" name="letter_code" size="1">
                                <option value="">请选择</option>
                                @if($letters)
                                    @foreach($letters as $item)
                                        <option value="{{$item['code']}}">{{$item['name']}}</option>
                                    @endforeach
                                @endif
                            </select>
                        </span>
                    </div>
                    <label class="form-label col-sm-2">委托单单号：</label>
                    <div class="formControls col-sm-4">
                        <input type="text" class="input-text" value="" name="letter_no" id="letter_no">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-sm-2">备注：</label>
                    <div class="formControls col-sm-10">
                        <textarea style="height: 45px" class="textarea" name="remark" id="remark"></textarea>
                    </div>
                </div>

                @csrf


            </form>
        </div>
    </div>

    <div class="row cl mt-20">
        <div class="col-sm-10 col-sm-offset-2">
            <input class="btn btn-primary radius size-L" form="form" type="submit" value="&nbsp;&nbsp;新建批次&nbsp;&nbsp;">
        </div>
    </div>
</div>

<script type="text/javascript">
    var table;

    $(function () {
        var index2;

        /* 动态绑定事件 (未测试成功，以后再研究)*/
        /* // 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
        $(selector).on( "click",“span”, function() {}); */


        /* $("#datatable").on("click","tbody tr",function(){
            $(this).find("input:radio").iCheck('check');
            $("tbody tr").css("background-color","#fff");
            $(this).css("background-color","#dee");
            console.log(this);
        });
        $("td").on("click",".iCheck-helper",function(){
            console.log(this);
            $("tbody tr").css("background-color","#fff");
            $(this).closest("tr").css("background-color","#dee");
        }); */
        /* 动态绑定事件 */

        $("#form").validate({
            rules: {
                // deadline:{
                //     required:true,
                // },
                money: {
                    required: true,
                    isNumber: true,
                    isFloatGteZero: true,
                    range: [0, 999999]
                },
            },
            // onkeyup:false,
            // focusCleanup:false,
            success: "valid",
            submitHandler: function (form) {
                $(form).ajaxSubmit({
                    type: 'post',
                    url: "/{{config('constant.name_admin')}}/contract/add",//自己提交给自己可以不写url
                    data: {
                        client_id: $('table input:radio:checked').val(),
                    },
                    //beforeSend  beforeSubmit
                    beforeSubmit: function () {
                        //如果验证不通过，返回false，阻止表单提交
                        var id = $('table input:radio:checked').val();
                        if (typeof (id) == "undefined") {
                            layer.msg('请选中一个客户', {time: 2000});
                            return false;
                        }
                    },
                    beforeSend: function () {
                        //0.4透明度 白色遮罩
                        index2 = layer.load(2, {shade: [0.3, '#fff']});
                    },
                    complete: function () {
                        layer.close(index2);
                    },
                    success: function (data) {
                        //判断添加结果
                        if (data > 0) {
                            // parent.table_reload(0);//0停留在当前页，1回到第一页
                            parent.layer.msg('新建批次成功!', {icon: 1, time: 2000});
                            location.href = '/{{config('constant.name_admin')}}/contractGaiyao/index?id=' + data;
                        } else {
                            layer.msg('新建批次失败!', {icon: 2, time: 2000});
                        }
                    },
                    error: function (data) {
                        ajax_error(data);
                    }
                });
            }
        });

        $.fn.dataTable.ext.errMode = 'throw';//datatable抛异常的方式，在console中输出，默认以alert的方式弹出
        table = $('#datatable').DataTable({
            // order: [[ 5, 'desc' ]],//默认第几个排序
            ordering: false, // 是否排序
            "pageLength": 5,
            "dom": '<"toolbar f-l pb-15">frtip',
            // "lengthChange": false,
            // "stateSave": true,// 状态保存 - 再次加载页面时还原表格状态
            // "stateDuration": -1,//仅保留当前会话的数据
            // "paging":false, //禁用分页
            serverSide: true,//服务器端处理模式——此模式下如：过滤、分页、排序的处理都放在服务器端进行。
            // responsive: true,//响应式，需要插件
            // fixedHeader: true,//表头固定，需要插件
            // autoWidth: false,
            ajax: "/{{config('constant.name_admin')}}/client/index",
            processing: true,//加载数据时候是否显示进度条
            language: {url: '/admin/lib/datatables/dataTables_Chinese_Lang.json'},
            createdRow: function (row, data, dataIndex) {
                //当tr元素被创建（所有的td元素已经插入进去），或者给tr绑定事件，该回调函数被执行
                //$(row).addClass( 'text-l' );
            },
            initComplete: function (settings, json) {
                //当表格完成加载绘制完成后执行此方法
                //仅初次表格数据加载完成后执行
                // $(row).addClass( 'text-c' );
                $("div.toolbar").html('<a class="btn btn-primary-outline radius" href="javascript:;" onclick="add(\'添加客户\',\'/{{config('constant.name_admin')}}/client/add\',\'800\',\'500\')"><i class="Hui-iconfont">&#xe600;</i> 添加客户</a> <a class="ml-50 btn btn-primary-outline radius" href="javascript:;" onclick="add(\'扫一扫\',\'/{{config('constant.name_admin')}}/client/showQrCode\',\'280\',\'400\')"><i class="Hui-iconfont">&#xe6cb;</i> 二维码</a>');
                $('#datatable_filter label input').attr('placeholder', '客户全称/联系人/电话')
            },
            columns: [
                { //单选框
                    data: null, class: "text-c",
                    render: function (data, type, row, meta) {
                        return '<input type="radio" name="client_id" value="' + row.id + '">';
                        // return '<input type="radio" name="demo-radio1">';
                    }
                },
                {data: "name", class: "text-c"},
                {data: "entrusted_company", class: "text-c"},
                {data: "contact", class: "text-c"},
                {data: "telephone", class: "text-c"},
                {data: "address", class: "text-c"},
                {data: "created_at", class: "text-c"},
                { //操作
                    data: null, class: "text-c",
                    render: function (data, type, row, meta) {
                        return '<a class="ml-5 btn btn-primary-outline radius size-MINI" href="javascript:;" onclick="edit(\'修改客户信息\',\'/{{config('constant.name_admin')}}/client/edit\',\'' + row.id + '\',\'\',\'500\')">修改</a>' +
                            ' <a href="javascript:;" onclick="del(\'' + row.id + '\')" class="ml-5 btn btn-danger-outline radius size-MINI">删除</a>';
                    }
                }
            ],
            columnDefs: [
                {targets: [0, 5, 6, 7], searchable: false},//不参与搜索的列
                // { targets: [3,6], orderable: false },//禁用排序的列
            ],
        });

        /*  draw  在表格完成绘制后触发*/
        table.on('draw', function () {
            /* var info = table.page.info();
            //如果最后一页仅剩一条记录，而且不是在第一页
            if((info.start == info.end) && info.end > 1){
                //跳转到上一页
                $('#datatable_previous').click();
            } */

            $('.skin-minimal input').iCheck({
                checkboxClass: 'icheckbox-blue',
                radioClass: 'iradio-blue',
                increaseArea: '20%'
            });

            $("tbody tr").click(function () {
                $(this).find("input:radio").iCheck('check');
                $("tbody tr").css("background-color", "#fff");
                $(this).css("background-color", "#dee");
            });
            $(".iCheck-helper").click(function () {
                $("tbody tr").css("background-color", "#fff");
                $(this).closest("tr").css("background-color", "#dee");
            });
        });


    });

    /*表格重新加载*/
    function table_reload(bool) {
        //清除表头 CheckBox的对勾
        $("#datatable").find("thead").find("input[type=checkbox]").removeAttr('checked');
        if (bool) {
            //true时，跳到第一页
            table.ajax.reload();
        } else {
            //false时，停留在原来页
            table.ajax.reload(null, false);
        }
    }

    /*删除*/
    function del(id) {
        var index2;

        layer.confirm('确认要删除吗？', function (index) {
            $.ajax({
                type: 'GET',
                url: '/{{config('constant.name_admin')}}/client/del' + '?id=' + id,
                // dataType: 'json',
                success: function (data) {
                    // console.log(data);
                    if (data === '1') {
                        table_reload(0);//0停留在当前页，1回到第一页
                        layer.msg('删除成功!', {icon: 1, time: 2000});
                    } else {
                        layer.msg('删除失败!', {icon: 2, time: 2000});
                    }
                },
                error: function (data) {
                    ajax_error(data);
                },
                beforeSend: function () {
                    //0.4透明度 白色遮罩
                    index2 = layer.load(2, {shade: [0.05, '#000']});
                },
                complete: function () {
                    layer.close(index2);
                },
            });
        });
    }

    /*编辑*/
    function edit(title, url, id, w, h) {
        layer_show(title, url + '?id=' + id, w, h);
    }

    /*添加*/
    function add(title, url, w, h) {
        layer_show(title, url, w, h);
    }

    /*管理检测性质*/
    function test_kind() {
        location.href = '/{{config('constant.name_admin')}}/testKind/index';
    }

    $('#letterEdit').on('click',function () {

    })

</script>
@endsection
